<template>
  <div class="wrapper" ref="wrapper">
     <!--使用插槽 --> 
    <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
  props: {
    probeType: {
      type: Number,
      default: 1 // 滚动使用的方式
    },
    click: {
      type: Boolean, // 触发事件
      default: true
    },
    data: {
      type: Array,
      default: null
    },
    listenScroll: { 
      type: Boolean, //监听scroll高亮事件
      default: false
    }
  },
  mounted() {
    // dom渲染完毕之后执行
    console.log('初始化第一次使用scroll插件');
    setTimeout(() => {
      this._initScroll();
    }, 20);
  },
  methods: {
    _initScroll() {
      if(!this.$refs.wrapper) {
         return; // 防止初始化报错
      }
      
      this.scroll = new BScroll(this.$refs.wrapper,{
          probeType : this.probeType, // 设定BS 实时监测滚动位置
          click: this.click
      })

      // 监听scroll事件 position是一个对象
      if(this.listenScroll) {
        let em = this;
        this.scroll.on('scroll',(position) => {
          em.$emit('scroll',position);
        })
      }

    },

    refresh() {
      this.scroll && this.scroll.refresh();
    },
    enable() {
      this.scroll && this.scroll.enable();
    },
    disable() {
      this.scroll && this.scroll.disable();
    },
    scrollTo(){
      // 滚动指定位置 this.scroll执行scroll的实例
      this.scroll && this.scroll.scrollTo().apply(this.scroll, arguments);
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
    }
  },
  watch: {
    // watch观察data的变化,重新刷新refresh()方法
    data() {
      console.log(' 初始化完毕,触发watch刷新this.scroll ');
      setTimeout(() => {
        this.refresh();
      }, 20);
    }
  }
}
</script>
